<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <!--轮播图css样式插件-->
    <link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
    <!--公共样式文件-->
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <!--当前html文件的样式-->
    <link rel="stylesheet" type="text/css" href="css/index.css" />
</head>

<body>
    <!-- 头部 -->
    <div class="header core clearfix">
        <h1>
            <a href="#"><img src="img/t013393d06de88f0ca5.png" alt=""></a>
        </h1>
        <form action="">
            <input type="text" placeholder="  公务员">
            <button><a href="#">搜索课程</a></button>
        </form>
    </div>
    <!--  导航栏 -->
    <div class="nav">
        <div class="nav-core core">
            <ul class="clearfix">
                <li><a href="#">首页</a></li>
                <li><a href="#">公务员</a></li>
                <li><a href="#">英语</a></li>
                <li><a href="#">中小学</a></li>
                <li><a href="#">留学</a></li>
                <li><a href="#">职教</a></li>
                <li><a href="#">在线学习</a></li>
                <li><a href="#">在线评测</a></li>
                <li><a href="#">面授课堂</a></li>
                <li><a href="#">青少导航</a></li>
            </ul>
        </div>
    </div>
    <!-- 内容 -->
    <div class="main core">
        <!-- 上部 -->
        <div class="main-top clearfix">
            <!-- 左 -->
            <div class="main-top-left">
                <img src="img/f663acf73f0105201f74867a30667a61.jpg" alt="">
                <div class="opacity"></div>
                <p>2016最值得学的8门语言!</p>
            </div>
            <!-- 中 -->
            <div class="main-top-center">
                <div class="main-top-center-pingjia">
                    <h2>2016年度评价最高的12门课</h2>
                    <p>2016年马上就要结束了，英大网罗了众多沪江学员的意见，挑选出了12门评价最高的英语课，和大家分享。</p>
                </div>
                <div class="main-top-center-lists">
                    <ul>
                        <li><span>「考试」</span><a href="#">国内有哪些值得考的英语证书？</a></li>
                        <li><span>「留学」</span><a href="#">盘点雅思口语各部分中最难的10道题</a></li>
                        <li><span>「学习」</span><a href="#">英语翻译秘诀：跟对的老师，学好的翻译</a></li>
                        <li><span>「口语」</span><a href="#">史上最强英语口语学习攻略|收藏利器！</a></li>
                        <li><span>「学习」</span><a href="#">BEC商务英语入门：书面用语高大上的技巧</a></li>
                        <li><span>「学习」</span><a href="#">有哪些颠扑不破的英语学习方法？</a></li>
                        <li><span>「学习」</span><a href="#">新概念英语的正确打开方式</a></li>
                    </ul>
                </div>
            </div>
            <!-- 右 -->
            <div class="main-top-right">
                <h3>热门推荐</h3>
                <img src="img/92744404de629a8cdba841858dbb5e9d.jpg" alt="">
            </div>
        </div>
        <!-- 下部 -->
        <div class="main-bottom">
            <h4>
                <img src="img/icon-note.png" alt="">
                <a href="#">推荐专题</a>
            </h4>
            <div class="main-tupian clearfix">
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
                <dl>
                    <dt><img src="img/201505286404914324.png" alt=""></dt>
                    <dd>新概念2.3.4册连</dd>
                </dl>
            </div>
        </div>
        <div class="main-free swiper-container " id="banner">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="img/t01dc0a909f4db40751.png" />
                </div>
                <div class="swiper-slide">
                    <img src="img/t01dc0a909f4db40751.png" />
                </div>
                <div class="swiper-slide">
                    <img src="img/t01dc0a909f4db40751.png" />
                </div>
            </div>
        </div>
    </div>
    <div class="tupian core">
        <img src="img/8fe3053ac0cac218ef8204b60109b696.jpg" alt="">
    </div>
    <!-- 尾部 -->
    <div class="footer">
        <div class="footer-guanyuwomen core">
            <p><a href="#">关于我们</a>&emsp;|&emsp;<a href="#">意见反馈</a>&emsp;copyright&copy;360网址导航.&emsp;&emsp;All Right Reserved.&emsp;<a href="#">京ICP证080047号</a></p>
        </div>
    </div>
</body>

</html>
<!--轮播图js插件-->
<script src="js/swiper-3.4.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    new Swiper("#banner", {
        autoplay: 2000,
        // effect: "cube",
        direction: "vertical",
    });
</script>
<!-- <div class="main-banner swiper-container core" id="banner">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <img src=" " />
        </div>
    </div>
</div> -->